<template>
  <ul class="topic-list">
    <li v-for="topic in topics" :key="topic.id">
      <a href="javasrcipt:;" @click="goToTopic(`/topics/${topic.id}`)">
        <h3 class="top">
          <span class="topping" v-show="topic.top">置顶</span>
          <span class="share" v-show="(topic.tab === 'share' && !topic.top ? true :false)">分享</span>
          <span class="pyr" v-show="(topic.tab === 'ask' && !topic.top ? true :false)">问答</span>
          {{topic.title}}
        </h3>
        <div class="content">
          <img :src="topic.author.avatar_url" alt class="avatar" />
          <div class="info">
            <p>
              <span>{{topic.author.loginname}}</span>
              <span><b>{{topic.reply_count}}</b>/{{topic.visit_count}}</span>
            </p>
            <p>
              <span>{{topic.create_at}}天前</span>
              <span>{{topic.last_reply_at}}小时前</span>
            </p>
          </div>
        </div>
      </a>
    </li>
  </ul>
</template>

<script>
import {getTopics} from '@/request/api'
export default {
  data() {
    return {
      isShare: true,
      isAsk: true
    }
  },
  computed: {
    topics() {
      return this.$store.state.topics
    }
  },
  methods: {
    goToTopic(path) {
      // console.log(this.$router);
      this.$router.push({
        path: path
      });
      // console.log(this.topics);
    }
  }
};
</script>

<style lang="less">
.topic-list {
  width: 100%;
  height: auto;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  li {
    padding: 10px 15px;
    position: relative;
    &:after{
      content: '';
      width: 100%;
      height: 1px;
      background: #d5dbdb;
      position: absolute;
      left: 0;
      bottom: 0;
    }
    a {
      display: block;
      color: #000;
    }
  }
  h3 {
    width: 100%;
    height: 22px;
    line-height: 22px;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    .share,.pyr,.topping {
      display: inline-block;
      width: 32px;
      height: 20px;
      background: #3498db;
      text-align: center;
      line-height: 22px;
      color: #fff;
      font-size: 10px;
      font-weight: 400;
      border-radius: 4px;
      margin-right: 10px;
    }
    .topping{
      background: #e74c3c;
    }
    .share{
      background: #1abc9c;
    }
  }
  .content {
    margin-top: 10px;
    display: flex;
    color: #34495e;
    img {
      display: block;
      width: 40px;
      height: 40px;
      border: 1px solid #f3f3f3;
      border-radius: 50%;
      margin-right: 10px;
    }
    .info{
      flex: 1;
      p{
      padding: 3px 0;
      font-size: 12px;
      display: flex;
      justify-content: space-between;
      &:first-child{
        font-size: 14px;
      }
      b{
        color: #42b983;
      }
    }
    }
  }
}
// /* 隐藏滚动条 */
// ::-webkit-scrollbar{
//   background: transparent;
//   width: 0;
//   height: 0;
// }
</style>